<template>
  <!-- 巡查管理 -->
  <div class="wrapper">
    <!-- @exportXls="exportXls" @handleEnSure="handleEnSure" @handleAdd="handleAdd" -->
    <SearchForm :area="'list'" :query="queryParamBasic" @onSearch="initData" />
    <a-card :body-style="{ padding: 0 }" :bordered="false">
      <a-spin :indicator="indicator" :spinning="spinning" tip="获取数据中...">
        <div class="spin-content">
          <a-table size="small" bordered :rowKey="record => record.id" :columns="columnsData" :dataSource="data"
            :pagination="pagination" :rowSelection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
            :rowClassName="setRowClassName">
            <span slot="type" slot-scope="text, record">
              <a-badge v-if="record.handlingTime != null && record.handlingTime != ''" :color="'green'" :text="'已处置'" />
              <a-badge v-else :color="'red'" :text="'未处置'" />
            </span>
            <span slot="action" slot-scope="text, record">
              <template>
                <a size="small" type="link" @click="handleView(record)">详情</a>
                <a-divider type="vertical" />
                <a size="small" type="link" @click="exportXls(record)">导出</a>
              </template>
            </span>
          </a-table>
        </div>
      </a-spin>
    </a-card>

    <a-modal style="top: 10px;" :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="'详情'"
      :width="1200" :maskClosable="false" :visible="visible" :okText="'导出'" @cancel="visible = false" @ok="exportXls(queryParam)">
      <div style="font-size: 24px;text-align: center; font-weight: bold;">
        <h1>各镇(街道)小型零星工程监管网络表</h1>
      </div>
      <a-form>
        <a-row :gutter="24">
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="填报单位">
              <a-input v-model="queryParam.fillInUnit" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="填报人">
              <a-input v-model="queryParam.fillInUnitPerson" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="联系电话">
              <a-input v-model="queryParam.fillInUnitPhone" allowClear />
            </a-form-item>
          </a-col>
          <a-col :lg="6" :md="12" :sm="24">
            <a-form-item v-bind="formItemLayout" label="填报日期">
              <a-input v-model="queryParam.fillInUnitDate" allowClear placeholder="" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-descriptions bordered :size="'small'">
            <!-- 第一行 -->
            <a-descriptions-item label="第一责任人">
              <span>{{ queryParam.firstResponsiblePerson }}</span>
              <!-- <a-input v-model="queryParam.firstResponsiblePerson" allowClear placeholder="" /> -->
            </a-descriptions-item>
            <a-descriptions-item label="第一责任人手机">
              <span>{{ queryParam.firstResponsiblePersonPhone }}</span>
              <!-- <a-input v-model="queryParam.firstResponsiblePersonPhone" allowClear placeholder="" /> -->
            </a-descriptions-item>
            <a-descriptions-item label="第一责任人邮箱">
              <span>{{ queryParam.firstResponsiblePersonEmail }}</span>
              <!-- <a-input v-model="queryParam.firstResponsiblePersonEmail" allowClear placeholder="" /> -->
            </a-descriptions-item>

            <!-- 第二行 -->
            <a-descriptions-item label="直接责任人">
              <span>{{ queryParam.directResponsiblePerson }}</span>
              <!-- <a-input v-model="queryParam.directResponsiblePerson" allowClear placeholder="" /> -->
            </a-descriptions-item>
            <a-descriptions-item label="直接责任人手机">
              <span>{{ queryParam.directResponsiblePersonPhone }}</span>
              <!-- <a-input v-model="queryParam.directResponsiblePersonPhone" allowClear placeholder="" /> -->
            </a-descriptions-item>
            <a-descriptions-item label="直接责任人邮箱">
              <span>{{ queryParam.directResponsiblePersonEmail }}</span>
              <!-- <a-input v-model="queryParam.directResponsiblePersonEmail" allowClear placeholder="" /> -->
            </a-descriptions-item>

            <!-- 第三行 -->
            <a-descriptions-item label="镇（街道）管理机构名称" :span="3">
              <span>{{ queryParam.unitName }}</span>
              <!-- <a-input v-model="queryParam.unitName" allowClear placeholder="" /> -->
            </a-descriptions-item>

            <!-- 第四行 -->
            <a-descriptions-item label="镇（街道）管理机构负责人">
              <span>{{ queryParam.unitHead }}</span>
              <!-- <a-input v-model="queryParam.unitHead" allowClear placeholder="" /> -->
            </a-descriptions-item>
            <a-descriptions-item label="镇（街道）管理机构负责人手机号">
              <span>{{ queryParam.unitHeadPhone }}</span>
              <!-- <a-input v-model="queryParam.unitHeadPhone" allowClear placeholder="" /> -->
            </a-descriptions-item>
            <a-descriptions-item label="镇（街道）管理机构负责人邮箱">
              <span>{{ queryParam.unitHeadEmail }}</span>
              <!-- <a-input v-model="queryParam.unitHeadEmail" allowClear placeholder="" /> -->
            </a-descriptions-item>

            <!-- 第五行 -->
            <a-descriptions-item label="三员名单">
              <!-- <a-input v-model="queryParam.threePersons" allowClear placeholder="" /> -->
              <!-- <div v-for="(threePersons,index) in jsonParse(queryParam.threePersons)" :key="index">
              <span class="block">{{threePersons.PersonType}}</span>
              <span class="block">{{threePersons.TrueName}}</span>
              <span class="block label">联系方式(手机号码)</span> <span class="block">{{threePersons.Phone}} </span>
              <span class="block label">负责区域</span><span class="block">{{threePersons.Area}} </span>
            </div> -->
              <div>
                <a-descriptions v-for="(threePersons, index) in threePersons" :key="index" bordered :size="'small'">
                  <a-descriptions-item :label="threePersons.PersonType">
                    <span>{{ threePersons.TrueName }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="联系方式(手机号码)">
                    <span>{{ threePersons.Phone }}</span>
                  </a-descriptions-item>
                  <a-descriptions-item label="负责区域">
                    <span>{{ threePersons.Area }}</span>
                  </a-descriptions-item>
                </a-descriptions>
              </div>
            </a-descriptions-item>
          </a-descriptions>

        </a-row>
        <a-row :gutter="24">
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item :style="{ float: 'right' }">
              <!-- <a-button type="primary" style="margin-left: 14px;" @click="onSave()">保存</a-button> -->
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import Vue from 'vue'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import SearchForm from './modules/searchformForList'
import { GetThreePersonList, GetThreePersonByID, ExportThreePerson } from '@/api/statistics'

import { tranDate } from '@/utils/util'
const userInfo = Vue.ls.get(ACCESS_TOKEN) // DepartmentID
let columnsData = [
  {
    title: '填报单位',
    dataIndex: 'fillInUnit',
    key: 'fillInUnit',
    align: 'center'
  },
  {
    title: '填报人',
    dataIndex: 'fillInUnitPerson',
    key: 'fillInUnitPerson',
    align: 'center'
  },
  {
    title: '联系电话',
    dataIndex: 'fillInUnitPhone',
    key: 'fillInUnitPhone',
    align: 'center'
  },
  {
    title: '填报日期',
    dataIndex: 'fillInUnitDate',
    key: 'fillInUnitDate',
    align: 'center'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    width: 130,
    align: 'center'
  }
]
export default {
  components: { SearchForm },
  props: {
    display: {
      type: String,
      required: false,
      default: 'default'
    }
  },
  created() {
    this.initData(this.queryParamBasic)
  },
  mounted() { },
  destroyed() { },
  data() {
    return {
      columnsData,
      action: 'add',
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      spinning: false,
      data: [],
      form: this.$form.createForm(this),
      queryParamBasic: {
        index: 1,
        pageSize: 10,
        departmentID: userInfo.DepartmentID,
        year: null,
        month: null
      },
      selectedRowKeys: [],
      pagination: {
        onChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        current: 1,
        total: 0,
        showQuickJumper: true,
        size: 'small',
        defaultPageSize: 10,
        showTotal: total => `共 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['5', '10', '15', '20'],
        onShowSizeChange: (index, pageSize) => {
          this.pageOnChange(index, pageSize)
        },
        position: 'bottom'
      },
      visible: false,
      queryParam: {
        id: '',
        departmentID: userInfo.DepartmentID,
        year: '',
        month: '',
        fillInUnit: '',
        fillInUnitPerson: '',
        fillInUnitPhone: '',
        fillInUnitDate: '',
        firstResponsiblePerson: '',
        firstResponsiblePersonPhone: '',
        firstResponsiblePersonEmail: '',
        directResponsiblePerson: '',
        directResponsiblePersonPhone: '',
        directResponsiblePersonEmail: '',
        unitName: '',
        unitHead: '',
        unitHeadPhone: '',
        unitHeadEmail: '',
        threePersons: '',
        updateUserID: '',
        updateTime: '',
        isSubmit: ''
      },
      threePersons: [],
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 }
        }
      },
      thisYear: '',
      thisMonth: ''
    }
  },
  watch: {},
  computed: {},
  methods: {
    initData(data) {
      this.spinning = true
      GetThreePersonList(data)
        .then(res => {
          this.data = res.data
          this.pagination.total = res.page.RecordCount
        })
        .finally(() => {
          this.spinning = false
        })
    },
    search(data) {
      Object.assign(this.queryParamBasic, data, { index: 1 })
      this.pagination.current = 1
      this.initData(this.queryParamBasic)
    },
    /**
     * 查看详情
     */
    handleView(data) {
      this.visible = true
      // const date = new Date()
      // const param = {
      //   departmentID: this.userInfo.DepartmentID,
      //   year: date.getFullYear(),
      //   month: date.getMonth() + 1
      // }
      GetThreePersonByID({ id: data.id })
        .then(res => {
          this.queryParam = res.data
          this.threePersons = this.jsonParse(this.queryParam.threePersons)
        })
        .finally(() => {
          this.spinning = false
        })
    },
    jsonParse(str) {
      const a = JSON.parse(str)
      return a
    },
    tranChooseData(data) {
      this.selectedRowKeys = data
    },
    setRowClassName(record, idx) {
      return idx % 2 == 1 ? 'bg-zebra-pattern' : ''
    },
    onSelectChange(selectedRowKeys) {
      // console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
    pageOnChange(index, pageSize) {
      this.spinning = true
      Object.assign(this.pagination, {
        current: index,
        pageSize,
        index
      })
      Object.assign(this.queryParamBasic, {
        pageSize,
        index
      })
      this.initData(this.queryParamBasic)
    },
    exportXls(data) {
      const param = {
        departmentID: data.departmentID,
        year: data.year,
        month: data.month
      }
      ExportThreePerson(param)
        .then(res => {
          const a = `${process.env.VUE_APP_API_BASE_URL}${res.data}`
          window.open(a)
        })
        .finally(() => {
          this.spinning = false
        })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
